import { onMounted, onBeforeUnmount, watch } from 'vue';
import { useRoute } from 'vue-router';
// 导入 Pinia 的 app store 和 DeviceType 枚举
import { useAppStore, DeviceType } from '@/store/app';

// 响应式断点，与旧项目保持一致
const WIDTH = 992;

/**
 * 一个用于处理浏览器窗口大小变化和设备类型判断的组合式函数 (Composable)。
 * 它会监听窗口 resize 事件，并根据宽度更新 Pinia store 中的设备状态。
 * 同时，它也会监听路由变化，在移动端自动关闭侧边栏。
 */
export function useResize() {
  // 1. 获取 Pinia store 和路由实例
  const appStore = useAppStore();
  const route = useRoute();

  /**
   * 判断当前是否为移动端设备
   * @returns boolean
   */
  const isMobile = (): boolean => {
    const rect = document.body.getBoundingClientRect();
    return rect.width - 1 < WIDTH;
  };

  /**
   * resize 事件的处理函数
   */
  const resizeHandler = () => {
    // 如果页面不是隐藏状态，才执行判断
    if (!document.hidden) {
      const mobile = isMobile();
      // 调用 Pinia store 的 action 来切换设备状态
      appStore.toggleDevice(mobile ? DeviceType.Mobile : DeviceType.Desktop);

      if (mobile) {
        // 如果是移动端，则关闭侧边栏
        appStore.closeSideBar(true); // withAnimation = true
      }
    }
  };

  // 2. 监听路由变化 (替代 @Watch('$route'))
  watch(() => route.path, () => {
    // 如果当前是移动端设备，并且侧边栏是打开状态
    if (appStore.device === DeviceType.Mobile && appStore.sidebar.opened) {
      // 则在路由切换时，自动关闭侧边栏
      appStore.closeSideBar(false); // withAnimation = false
    }
  });

  // 3. 生命周期钩子 (替代 beforeMount, mounted, beforeDestroy)

  // onMounted 会在组件挂载后执行
  onMounted(() => {
    // 添加 resize 事件监听
    window.addEventListener('resize', resizeHandler);
    // 立即执行一次，用于初始化设备状态
    resizeHandler();
  });

  // onBeforeUnmount 会在组件卸载前执行
  onBeforeUnmount(() => {
    // 移除事件监听，防止内存泄漏
    window.removeEventListener('resize', resizeHandler);
  });
}
